jQuery(document).ready(function($) {

    $('.city-menu').css({"overflow":"auto"});

	//Disable scrolling on ipad
	$(document).bind('touchmove', false);

    //Load the categories by calling the changeCategories function
    var selectedCity = $.cookie('selected_city');
    if (selectedCity) {
        changeCategories(selectedCity);

        $('li#'+selectedCity).addClass('active');
    } else {
        var firstCity = $('ul.cities li:first').attr('id');

        changeCategories(firstCity);
        $('li#'+firstCity).addClass('active');
    }

    //Side menu panel constructor
    var jPM = $.jPanelMenu({
        menu: '.city-menu',
        trigger: '.menu-button'
    });

    //Start the side menu panel
    jPM.on();

    //Set cookie for chosen city and call the change categories function
    $('ul.cities li').on('click', function() {

        //if there's an li with the active class, remove the class
        $('li.city').removeClass('active');

        //store a cookie for the selected country
        var selectedCity = $(this).attr('id');
        $.cookie('selected_city', selectedCity);

        //call the change categories function
        changeCategories(selectedCity);

        //Trigger click the close button
        setTimeout(function(){
            $('.menu-button').click();
        },100);

        //add the active class to the clicked li
        $(this).addClass('active');
    });

    //Display options for the graphs
	$('ul.display-options-ul li').click(function() {

        //Check that it's not the fullscreen button
        if ( !$(this).is('#layout-fullscreen-button') ) {

            //Remove the li with the active class
            $('ul.display-options-ul li.active').removeClass('active');
            //Add the class active to the li that has been clicked
            $(this).addClass('active');

            //Set a cookie for the selected view options
            var selectedView = $(this).attr('id');
            $.cookie('selected_display_option', selectedView);

            var graphCount = $('.graphs').size();

            if ( $(this).is('#single-view') ) {

                if ( graphCount == 2 ) {
                    $('.graph-2-2').remove();
                    $('.graph-1-2').removeClass('double-view graph-1-2').addClass('single-view graph-1-1').attr('id','graph-1-1');
                    $('#graph-drawzone-1-2').attr('id', 'graph-drawzone-1-1');
                }

                if ( graphCount == 4 ) {
                    $('.graph-2-4, .graph-3-4, .graph-4-4').remove();
                    $('.graph-1-4').removeClass('quad-view graph-1-4').addClass('single-view graph-1-1').attr('id','graph-1-1');
                }

            }

            if ( $(this).is('#double-view') ) {

                if ( graphCount == 1 ) {
                    $('.graphs').removeClass('single-view graph-1-1').addClass('double-view graph-1-2').attr('id','graph-1-2');
                    $('#graph-drawzone-1-1').attr('id', 'graph-drawzone-1-2');
                    $('.graph-1-2').after('<div id="graph-2-2" class="graphs double-view graph-2-2"></div>');
                    $('<div class="graph-info"><span id="chosen-category-icon"></span><span class="category-city"></span><span class="more-info-graph-btn icon-info-circled"></span><span class="close-graph-btn icon-cancel-circled"></span><div class="graph-info-blank"></div></div>').appendTo('.graph-2-2');
                    $('<div class="graph-drawzone" id="graph-drawzone-2-2"></div>').appendTo('.graph-2-2');
                    $('.graph-dropzone').clone().appendTo('.graph-2-2');
                }

                if ( graphCount == 4 ) {
                    $('.graph-3-4, .graph-4-4').remove();
                    $('.graph-1-4').removeClass('quad-view graph-1-4').addClass('double-view graph-1-2').attr('id','graph-1-2');
                    $('.graph-2-4').removeClass('quad-view graph-2-4').addClass('double-view graph-2-2').attr('id','graph-2-2');
                }

            }

            if ( $(this).is('#quad-view') ) {

                if ( graphCount == 1 ) {
                    $('.graph-1-1').removeClass('single-view graph-1-1').addClass('quad-view graph-1-4').attr('id','graph-1-4');
                    $('#graph-drawzone-1-1').attr('id', 'graph-drawzone-1-4');
                    $('.graph-1-4').after('<div id="graph-2-4" class="graphs quad-view graph-2-4"></div>');
                    $('<div class="graph-info"><span id="chosen-category-icon"></span><span class="category-city"></span><span class="more-info-graph-btn icon-info-circled"></span><span class="close-graph-btn icon-cancel-circled"></span><div class="graph-info-blank"></div></div>').appendTo('.graph-2-4');
                    $('<div class="graph-drawzone" id="graph-drawzone-2-4"></div>').appendTo('.graph-2-4');
                    $('.graph-dropzone').clone().appendTo('.graph-2-4');
                    $('.graph-2-4').after('<div id="graph-3-4" class="graphs quad-view graph-3-4"></div>');
                    $('.graph-2-4').children('.graph-info').clone().appendTo('.graph-3-4');
                    $('<div class="graph-drawzone" id="graph-drawzone-3-4"></div>').appendTo('.graph-3-4');
                    $('.graph-2-4').children('.graph-dropzone').clone().appendTo('.graph-3-4');
                    $('.graph-3-4').after('<div id="graph-4-4" class="graphs quad-view graph-4-4"></div>');
                    $('.graph-2-4').children('.graph-info').clone().appendTo('.graph-4-4');
                    $('<div class="graph-drawzone" id="graph-drawzone-4-4"></div>').appendTo('.graph-4-4');
                    $('.graph-3-4').children('.graph-dropzone').clone().appendTo('.graph-4-4');
                }

                if ( graphCount == 2 ) {
                    $('.graph-1-2').removeClass('double-view graph-1-2').addClass('quad-view graph-1-4').attr('id','graph-1-4');
                    $('#graph-drawzone-1-2').attr('id', 'graph-drawzone-1-4');
                    $('.graph-2-2').removeClass('double-view graph-2-2').addClass('quad-view graph-2-4').attr('id','graph-2-4');
                    $('#graph-drawzone-2-2').attr('id', 'graph-drawzone-2-4');
                    $('.graph-2-4').after('<div id="graph-3-4" class="graphs quad-view graph-3-4"></div>');
                    $('<div class="graph-info"><span id="chosen-category-icon"></span><span class="category-city"></span><span class="more-info-graph-btn icon-info-circled"></span><span class="close-graph-btn icon-cancel-circled"></span><div class="graph-info-blank"></div></div>').appendTo('.graph-3-4');
                    $('<div class="graph-drawzone" id="graph-drawzone-3-4"></div>').appendTo('.graph-3-4');
                    $('.graph-2-4').children('.graph-dropzone').clone().appendTo('.graph-3-4');
                    $('.graph-3-4').after('<div id="graph-4-4" class="graphs quad-view graph-4-4"></div>');
                    $('.graph-3-4').children('.graph-info').clone().appendTo('.graph-4-4');
                    $('<div class="graph-drawzone" id="graph-drawzone-4-4"></div>').appendTo('.graph-4-4');
                    $('.graph-3-4').children('.graph-dropzone').clone().appendTo('.graph-4-4');
                }

            }
        }

        //Make the newly appended dropzones droppable
        makeDropzoneDroppable();

        //Sources popover
        sourcesPopover();

	});

    $('#layout-fullscreen-button').click(function(){
        $(this).toggleClass('fullscreen-active');
    });

    //Load the main display by checking if the display option cookie is set
    var selectedView = $.cookie('selected_display_option');
    if (selectedView) {
        if (selectedView == 'double-view') {
            $('li#double-view').click();
        } else if (selectedView == 'quad-view') {
            $('li#quad-view').click();
        }
    }



    //Make the dropzone droppable on document ready
    makeDropzoneDroppable();

    //Sources popover
    sourcesPopover();

    //Calculate the categories height on document load
    calcCategoriesHeight();

    //Calculate the categories height on document resize
    $(window).resize(function() {
        calcCategoriesHeight();
    });


});

//Sources popover (using Twitter's Bootstrap)
function sourcesPopover() {
    $('.more-info-graph-btn').popover({
        placement: 'bottom',
        trigger: 'click',
        html: 'true',
        title: 'Source'
    });
}

//Handles the jQuery UI droppable zone
function makeDropzoneDroppable() {
    $('.graph-dropzone').droppable({
        over: function() {
            $(this).addClass('hover');
            $(this).find('.dropzone-icon').addClass('animated bounce');
            $(this).find('.dropzone-text').html('There you go, now hold steady and let go!');

        },
        out: function() {
            $(this).removeClass('hover');
            $(this).find('.dropzone-icon').removeClass('animated bounce');
            $(this).find('.dropzone-text').html('Drag and drop a category to this area to begin');
        },
        drop: function() {
            category = $('.ui-draggable-dragging').data('category');

            selectedCity = $.cookie('selected_city');
            if (selectedCity) {
                city = selectedCity;
            } else {
                city = $('ul.cities li:first').attr('id');
            }

            element = $(this).prev().attr('id');

            icon = $('.ui-draggable-dragging').data('icon');

            type = $('.ui-draggable-dragging').data('category-type');

            loadGraph(category, city, element, icon, type);

            $('.ui-draggable-dragging').remove();

            $(this).removeClass('hover');
            $(this).find('.dropzone-icon').removeClass('animated bounce');
            $(this).find('.dropzone-text').html('Drag and drop a category to this area to begin');
        }
    });
}

//List categories height calculation
function calcCategoriesHeight() {
    var headerHeight = 60;
        footerHeight = 55;
        categoriesHeight = $(document).height() - (headerHeight + footerHeight);

    $('ul.categories').css('height', categoriesHeight+'px');
}